import LeftArrow from "@/assets/image/icons/left arrow.svg";
import AnnouncementsCard from "@/components/announcements-card";
import { getAnnouncementList } from "@/services/announcement";
import { useEffect, useState } from "react";
import { Link } from "umi";
import "./index.less";
import { Announcement } from "./types";
export default function HomeAnnouncements() {
  const announcementsData1 = [
    {
      icon: "2",
      time: "2024-8-27 00:00:0",
      title: " Enjoy Discounted Parking All July Long",
      annDescription: "Description for announcement 2",
      annTitle: "Title for announcement 1",
      content:
        "Whether you need to park for a full month or just a week, you can take advantage of these reduced prices. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. Whether you need to park for a full month or just a week, you can take advantage of these reduced prices. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together.",
    },
    {
      icon: "2",
      time: "2024-8-27 00:00:00",
      title: "Announcement 1",
      content: "Content for announcement 1",
      annDescription: "Description for announcement 2",
      annTitle: "Title for announcement 1",
    },
    {
      icon: "3",
      time: "2024-8-27 00:00:00",
      title: "Announcement 2",
      content: "Content for announcement 2",
      annDescription: "Description for announcement 2",
      annTitle: "Title for announcement 1",
    },
  ];
  const [announcementsData, setAnnouncementsData] =
    useState<Announcement[]>(announcementsData1);
  useEffect(() => {
    getAnnouncementList({
      startDate: "2024-08-19",
      status: "ACTIVE",
      endDate: "2024-12-18",
      userType: "type3",
    })
      .then((data) => {
        console.log(data, "getAnnouncementList");
        //@ts-ignore
        setAnnouncementsData(data.data || []);
      })
      .catch((error) => {
        console.error(error, "error");
      });
  }, []);

  return (
    <div className="home-announcements">
      <div className="title-content">
        <div className="title">Announcements</div>
        <Link to={`/announcements`}>
          View All&nbsp;({announcementsData.length})
          <img src={LeftArrow} alt="left-arrow" />
        </Link>
      </div>

      <AnnouncementsCard isHome={true} announcements={announcementsData} />
    </div>
  );
}
